'use client'
import { Button, Flex } from 'antd'
import printJS from 'print-js'
// https://juejin.cn/post/7319181190492831782#heading-2
export default function PrintCom() {
    const list = new Array(10).fill(1)
    const tabls = new Array(40).fill(1)
    const pringPage = () => {
        printJS({
            printable: 'print_con',
            type: 'html',
            // header: '<h1>打印</h1>',
            // headerStyle: 'text-align: center;',
            documentTitle: '',
            // targetStyles: ['*'],
            css: '/print.css',
            scanStyles: false,
            style: 'body {font-size: 16px;}'
        })
    }
    return <div>
        <Button onClick={pringPage}>打印</Button>
        <div id='print_con' className='a4-body'>
            {
                list.map((item, index) => {
                    return <div key={index} className='mb-3 page_con  bg-blue-400'>
                        <div className='a4-page'>
                            <div className='title'>发送到发</div>
                            <div style={{ display: 'flex', flexWrap: 'wrap',width:'100%' }}>
                                {
                                    list.map((item, index) => {
                                        return <img style={{ width: '30%', marginRight: "20px" }} src="https://workyd.com/image/source_plant/avatar.png" alt="" key={index} />
                                    })
                                }
                            </div>
                            fsfas
                        </div>
                        <div className='a4-footer'>底部</div>
                    </div>

                })
            }


        </div>
    </div>
}